<template>
    <div class="detailsBox">
        <div class="djClass"><i class="el-icon-arrow-left" @click="backHandler"></i>大疆 Fly</div>
        <div>
            <!-- <video width="100%" height="220" controls :src="formateScr"></video> -->
            <video width="100%" height="220" controls></video>
        </div>
        <h3
            style="font-weight: bold;padding-left:10px;height:34px;border-bottom:1px solid #e7e7e7;line-height: 34px;margin-bottom:5px;">
            视频信息:
        </h3>
        <div style="padding-left:10px;">
            <i class="el-icon-warning-outline"></i>
            {{$t('wechat.playTip')}}
            <!-- <el-link type="primary" style="float: right;margin-right:20px;" @click="codeFormate(videoActionData)"> -->
            <el-link  style="float: right;margin-right:20px;color: #4abaf7;">
                <!-- <i v-if="showTime" class="el-icon-loading"></i>  -->
                <!-- <i class="el-icon-loading"></i>  -->
                转码播放
            </el-link>
        </div>
        <div style="padding-left:10px;">
            <i class="el-icon-folder"></i>
            文件名：{{ videoActionData.fileName }}
        </div>
        <div style="padding-left:10px;">
            <i class="el-icon-files"></i>
            文件大小：{{ videoActionData.filesize ?(videoActionData.filesize / 1048576).toFixed(3):'' }}MB ({{ videoActionData.filesize }}Byte)
        </div>
        <div style="padding-left:10px;"><i class="el-icon-lock"></i> MD5:{{ videoActionData.validvalue }}</div>
        <div style="padding-left:10px;"><i class="el-icon-guide"></i> {{$t('wechat.imgPath')}}:{{ videoActionData.path }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            videoActionData: {}
        };
    },
    components: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        backHandler(){
            this.$emit('backEvent',true);
        }
    },
};
</script>

<style lang='scss' scoped>
.detailsBox {
    width: 100%;
    height: 99vh;
    overflow-y: auto;
    position: relative;

    .djClass {
        height: 50px;
        border-bottom: 1px solid rgb(207, 206, 206);
        text-align: center;
        font-size: 20px;
        font-weight: bold;
        line-height: 50px;
        position: relative;

        .el-icon-arrow-left {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 26px;
            font-weight: 900;
        }
        :hover{
            color:#4abaf7;
        }
    }

}

.detailsBox>div {
    min-height: 30px;
    line-height: 30px;
    /* padding-left:10px; */
    border-bottom: 1px solid #ebebeb;
}</style>